<template>
  <el-row :gutter="20" class="realDataWrapper">
    <el-col :span="12">
      <el-card shadow="always" body-style="padding:28px 10px">
        <el-descriptions :title="$t('mes.healthZoneData')" direction="vertical" :column="14" border>
          <template #title>
            {{ $t('mes.realTimeData') }}
            <el-tag class="m-ml-10" type="warning" effect="plain"> {{ productionLineCode|| '-' }}</el-tag>
          </template>
          <el-descriptions-item className="font-size20" align="center" :label="$t('mes.workingProcedure')">
            <p class="color2 " style="font-weight: bold;text-align: center;margin: 0"> {{ data.processCode || '-' }}</p>
          </el-descriptions-item>
          <el-descriptions-item className="font-size20" align="center" :label="$t('mes.totalPointNumber')">
            <el-tag>{{
                data.occupyQty || '0'
              }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item className="font-size20" align="center" :label="$t('mes.totalNumberOfItems')">
            <el-tag>{{ data.materialQty || '0' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item className="font-size20" align="center" :label="$t('mes.totalpallets')" :span="2">
            <el-tag>{{ data.restQty || 0 }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item className="font-size20" align="center" :label="$t('mes.totalNumberOf')">
            <el-tag>{{
                data.sumQty || '0'
              }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card shadow="always" body-style="padding:20px 10px">
        <div style="font-weight: 600">{{ $t('mes.rgvDataSummary') }}<el-tag class="m-ml-10" type="warning" effect="plain"> {{ productionLineCode || '-' }}</el-tag></div>
        <el-table :data="tableData" header-align="center"
                  stripe
                  :fit="true"
                  :header-cell-style="{color:'#000',textAlign:'center'}"
                  :cell-style="{textAlign: 'center'}"
                  style="width: 100%;">
          <el-table-column prop="rgvNo" :label="$t('mes.rgvName')">
            <template #default="scope">
              <el-tag effect="light" type="success">{{ scope.row.rgvNo }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="cartonNo" :label="$t('mes.rgvLoadingPallet')">
            <template #default="scope">
              <el-tag>{{
                  scope.row.cartonNo
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="materialCode" :label="$t('mes.rgvMaterialNumber')">
            <template #default="scope">
              <el-tag>{{
                  scope.row.materialCode
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fromLocationCode" :label="$t('mes.rgvFetchingPosition')">
            <template #default="scope">
              <el-tag>{{
                  scope.row.fromLocationCode
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="toLocationCode" :label="$t('mes.rgvdishargePosition')">
            <template #default="scope">
              <el-tag>{{
                  scope.row.toLocationCode
                }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
        <!--        <el-descriptions :title="$t('mes.rgvDataSummary')" direction="vertical" :column="14" border>-->
        <!--          <el-descriptions-item align="center" className="font-size20 text-shadow" :label="$t('mes.rgvName')">{{-->
        <!--              data.carton_name || '-'-->
        <!--            }}-->
        <!--          </el-descriptions-item>-->
        <!--          <el-descriptions-item align="center" className="font-size20 text-shadow" :label="$t('mes.rgvLoadingPallet')">{{-->
        <!--              data.carton_no || '-'-->
        <!--            }}-->
        <!--          </el-descriptions-item>-->
        <!--          <el-descriptions-item align="center" className="font-size20 text-shadow" :label="$t('mes.rgvMaterialNumber')">-->
        <!--            {{ data.material_code || '-' }}-->
        <!--          </el-descriptions-item>-->
        <!--          <el-descriptions-item align="center" className="font-size20 text-shadow" :label="$t('mes.rgvFetchingPosition')">-->
        <!--            {{-->
        <!--              data.from_location_code || '-'-->
        <!--            }}-->
        <!--          </el-descriptions-item>-->
        <!--          <el-descriptions-item align="center" className="font-size20 text-shadow" :label="$t('mes.rgvdishargePosition')" :span="2">-->
        <!--            {{ data.to_location_code || '-' }}-->
        <!--          </el-descriptions-item>-->
        <!--        </el-descriptions>-->
      </el-card>
    </el-col>
  </el-row>

</template>

<script>
export default {
  name: 'realDataCard',
  inject: ['productionLineCode'],
  props: {
    data: {
      type: Object,
      default: () => {
        return {}
      }
    },
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  computed: {
    standardConsume () {
      const _this = this
      const number = Number(_this.data.standardConsume || 0).toFixed(2)
      return number
    }
  },
  mounted () {
    const _this = this
    setTimeout(() => {
      // 能打印出来
      // console.log(1213, _this.tableData)
    }, 3000)
  }
}
</script>

<style lang="scss">
.font-size20 {
  line-height: 3 !important;
  font-weight: bolder;
}

.descriptions-item {
  text-align: center;
  margin: 0;
}

.realDataWrapper {
  margin-top: 10px;
}

.text-shadow {
  text-shadow: 0px 1px 1px #000
}
</style>
